<template>
  <div class="job-applications-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">申请管理</h1>
          <p class="page-subtitle">管理学生的岗位申请，审核申请状态</p>
        </div>
        <div class="header-actions">
          <ThemeToggle />
          <el-button
            type="primary"
            @click="handleBatchApprove"
            :disabled="selectedApplications.length === 0"
            :icon="Check"
          >
            批量通过
          </el-button>
          <el-button
            type="danger"
            @click="handleBatchReject"
            :disabled="selectedApplications.length === 0"
            :icon="Close"
          >
            批量拒绝
          </el-button>
        </div>
      </div>
    </div>

    <!-- 页面内容 -->
    <div class="page-content">
      <!-- 搜索区域 -->
      <div class="search-section">
        <el-card class="search-card">
          <template #header>
            <div class="search-header">
              <el-icon class="search-icon"><Search /></el-icon>
              <span>筛选条件</span>
            </div>
          </template>

          <div class="search-form">
            <el-form :model="searchForm" inline>
              <el-form-item label="搜索">
                <el-input
                  v-model="searchForm.search"
                  placeholder="请输入学生姓名、学号、岗位名称、公司名称"
                  clearable
                  class="search-input"
                  :prefix-icon="Search"
                />
              </el-form-item>
              <el-form-item label="申请状态">
                <el-select
                  v-model="searchForm.status"
                  placeholder="请选择"
                  clearable
                  class="search-select"
                >
                  <el-option label="待审核" value="pending" />
                  <el-option label="已通过" value="approved" />
                  <el-option label="已拒绝" value="rejected" />
                </el-select>
              </el-form-item>
              <el-form-item label="岗位">
                <el-select
                  v-model="searchForm.job"
                  placeholder="请选择岗位"
                  clearable
                  filterable
                  class="search-select"
                  @focus="loadJobs"
                >
                  <el-option
                    v-for="job in jobList"
                    :key="job.id"
                    :label="`${job.title} - ${job.company_name}`"
                    :value="job.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch" :icon="Search">
                  搜索
                </el-button>
                <el-button @click="handleReset" :icon="RefreshLeft">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>

      <!-- 统计信息 -->
      <div class="statistics-section">
        <el-card class="statistics-card">
          <template #header>
            <div class="statistics-header">
              <el-icon class="statistics-icon"><DataAnalysis /></el-icon>
              <span>申请统计</span>
            </div>
          </template>
          <el-row :gutter="24">
            <el-col :span="6">
              <div class="stat-item total">
                <div class="stat-value">{{ statistics.total }}</div>
                <div class="stat-label">总申请数</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item pending">
                <div class="stat-value">{{ statistics.pending }}</div>
                <div class="stat-label">待审核</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item approved">
                <div class="stat-value">{{ statistics.approved }}</div>
                <div class="stat-label">已通过</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item rejected">
                <div class="stat-value">{{ statistics.rejected }}</div>
                <div class="stat-label">已拒绝</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <!-- 申请列表 -->
      <div class="table-section">
        <el-card class="table-card">
          <template #header>
            <div class="table-header">
              <el-icon class="table-icon"><List /></el-icon>
              <span>申请列表</span>
              <div class="table-actions">
                <el-button size="small" @click="loadApplications" :icon="Refresh">
                  刷新
                </el-button>
              </div>
            </div>
          </template>
          <div class="table-container">
            <el-table
              :data="applicationList"
              v-loading="loading"
              stripe
              class="application-table"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="student_name" label="学生姓名" width="100" />
              <el-table-column prop="student_id" label="学号" width="120" />
              <el-table-column prop="job_title" label="申请岗位" min-width="150" />
              <el-table-column prop="company_name" label="公司名称" min-width="150" />
              <el-table-column label="申请状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="getStatusTagType(row.status)" size="small">
                    {{ getStatusText(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="applied_at" label="申请时间" width="160">
                <template #default="{ row }">
                  {{ formatDate(row.applied_at) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="{ row }">
                  <el-button
                    size="small"
                    type="primary"
                    link
                    @click="handleDetail(row)"
                    :icon="View"
                  >
                    查看详情
                  </el-button>
                  <template v-if="row.status === 'pending'">
                    <el-button
                      type="success"
                      size="small"
                      link
                      @click="handleApprove(row)"
                      :icon="Check"
                    >
                      通过
                    </el-button>
                    <el-button
                      type="danger"
                      size="small"
                      link
                      @click="handleReject(row)"
                      :icon="Close"
                    >
                      拒绝
                    </el-button>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页 -->
          <div class="pagination-wrapper">
            <el-pagination
              v-model:current-page="pagination.page"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 申请详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="申请详情"
      width="900px"
    >
      <div class="application-detail" v-if="selectedApplication">
        <!-- 学生信息 -->
        <el-card class="detail-section">
          <template #header>
            <h4>学生信息</h4>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="姓名">
              {{ selectedApplication.student_info?.name }}
            </el-descriptions-item>
            <el-descriptions-item label="学号">
              {{ selectedApplication.student_info?.student_id }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              {{ selectedApplication.student_info?.email }}
            </el-descriptions-item>
            <el-descriptions-item label="电话">
              {{ selectedApplication.student_info?.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="年级" span="2">
              {{ selectedApplication.student_info?.grade }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 岗位信息 -->
        <el-card class="detail-section">
          <template #header>
            <h4>岗位信息</h4>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="岗位名称">
              {{ selectedApplication.job_info?.title }}
            </el-descriptions-item>
            <el-descriptions-item label="公司名称">
              {{ selectedApplication.job_info?.company_info?.name }}
            </el-descriptions-item>
            <el-descriptions-item label="工作地点">
              {{ selectedApplication.job_info?.work_location }}
            </el-descriptions-item>
            <el-descriptions-item label="薪资水平">
              {{ selectedApplication.job_info?.salary_range }}
            </el-descriptions-item>
            <el-descriptions-item label="学历要求">
              {{ selectedApplication.job_info?.education_requirement }}
            </el-descriptions-item>
            <el-descriptions-item label="经验要求">
              {{ selectedApplication.job_info?.experience_requirement }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 申请信息 -->
        <el-card class="detail-section">
          <template #header>
            <h4>申请信息</h4>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="申请状态">
              <el-tag :type="getStatusTagType(selectedApplication.status)">
                {{ getStatusText(selectedApplication.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="申请时间">
              {{ formatDate(selectedApplication.applied_at) }}
            </el-descriptions-item>
            <el-descriptions-item label="求职信" v-if="selectedApplication.cover_letter">
              <div class="cover-letter">
                {{ selectedApplication.cover_letter }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="简历文件" v-if="selectedApplication.resume_file">
              <el-link
                :href="selectedApplication.resume_file"
                target="_blank"
                type="primary"
              >
                下载简历
              </el-link>
            </el-descriptions-item>
            <el-descriptions-item
              label="审核意见"
              v-if="selectedApplication.review_comments"
            >
              <div class="review-comments">
                {{ selectedApplication.review_comments }}
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <template v-if="selectedApplication?.status === 'pending'">
            <el-button type="success" @click="handleApprove(selectedApplication)">
              通过申请
            </el-button>
            <el-button type="danger" @click="handleReject(selectedApplication)">
              拒绝申请
            </el-button>
          </template>
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog
      v-model="reviewDialogVisible"
      :title="reviewType === 'approve' ? '通过申请' : '拒绝申请'"
      width="500px"
    >
      <el-form :model="reviewForm" :rules="reviewRules" ref="reviewFormRef" label-width="100px">
        <el-form-item label="审核意见" prop="review_comments">
          <el-input
            v-model="reviewForm.review_comments"
            type="textarea"
            :rows="4"
            :placeholder="reviewType === 'approve' ? '请填写通过理由（可选）' : '请填写拒绝理由'"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="reviewDialogVisible = false">取消</el-button>
        <el-button
          :type="reviewType === 'approve' ? 'success' : 'danger'"
          @click="submitReview"
          :loading="submitting"
        >
          确认{{ reviewType === 'approve' ? '通过' : '拒绝' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search, Check, Close, View, Refresh, RefreshLeft,
  DataAnalysis, List
} from '@element-plus/icons-vue'
import { jobApplicationApi, jobApi } from '@/api/jobs'
import ThemeToggle from '@/components/ThemeToggle.vue'
import type { JobApplication, Job } from '@/types'

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const applicationList = ref<JobApplication[]>([])
const jobList = ref<Job[]>([])
const selectedApplication = ref<JobApplication | null>(null)
const selectedApplications = ref<JobApplication[]>([])
const detailDialogVisible = ref(false)
const reviewDialogVisible = ref(false)
const reviewFormRef = ref()
const reviewType = ref<'approve' | 'reject'>('approve')

// 搜索表单
const searchForm = reactive({
  search: '',
  status: '',
  job: ''
})

// 分页
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 统计数据
const statistics = reactive({
  total: 0,
  pending: 0,
  approved: 0,
  rejected: 0
})

// 审核表单
const reviewForm = reactive({
  review_comments: ''
})

const reviewRules = {
  review_comments: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (reviewType.value === 'reject' && !value) {
          callback(new Error('拒绝申请时必须填写拒绝理由'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 方法
const fetchApplicationList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      page_size: pagination.pageSize,
      ...searchForm
    }

    const response = await jobApplicationApi.getApplicationList(params)
    applicationList.value = response.data.results || []
    pagination.total = response.data.count || 0

    // 更新统计数据
    updateStatistics()
  } catch (error) {
    console.error('获取申请列表失败:', error)
    ElMessage.error('获取申请列表失败')
    applicationList.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

const loadJobs = async () => {
  try {
    const response = await jobApi.getJobList({ page_size: 1000 })
    jobList.value = response.data.results || []
  } catch (error) {
    console.error('获取岗位列表失败:', error)
  }
}

const updateStatistics = () => {
  statistics.total = applicationList.value.length
  statistics.pending = applicationList.value.filter(app => app.status === 'pending').length
  statistics.approved = applicationList.value.filter(app => app.status === 'approved').length
  statistics.rejected = applicationList.value.filter(app => app.status === 'rejected').length
}

const handleSearch = () => {
  pagination.page = 1
  fetchApplicationList()
}

const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    (searchForm as any)[key] = ''
  })
  handleSearch()
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  fetchApplicationList()
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
  fetchApplicationList()
}

const handleSelectionChange = (selection: JobApplication[]) => {
  selectedApplications.value = selection
}

const handleDetail = async (application: JobApplication) => {
  try {
    const response = await jobApplicationApi.getApplicationDetail(application.id)
    selectedApplication.value = response.data
    detailDialogVisible.value = true
  } catch (error) {
    console.error('获取申请详情失败:', error)
    ElMessage.error('获取申请详情失败')
  }
}

const handleApprove = (application: JobApplication) => {
  selectedApplication.value = application
  reviewType.value = 'approve'
  reviewForm.review_comments = ''
  reviewDialogVisible.value = true
}

const handleReject = (application: JobApplication) => {
  selectedApplication.value = application
  reviewType.value = 'reject'
  reviewForm.review_comments = ''
  reviewDialogVisible.value = true
}

const submitReview = async () => {
  if (!reviewFormRef.value || !selectedApplication.value) return

  try {
    await reviewFormRef.value.validate()

    submitting.value = true

    const reviewData = {
      status: reviewType.value === 'approve' ? 'approved' : 'rejected',
      review_comments: reviewForm.review_comments
    }

    await jobApplicationApi.reviewApplication(selectedApplication.value.id, reviewData)

    ElMessage.success(`申请${reviewType.value === 'approve' ? '通过' : '拒绝'}成功`)
    reviewDialogVisible.value = false
    detailDialogVisible.value = false
    fetchApplicationList()

  } catch (error) {
    console.error('审核失败:', error)
    ElMessage.error('审核失败')
  } finally {
    submitting.value = false
  }
}

const handleBatchApprove = async () => {
  if (selectedApplications.value.length === 0) {
    ElMessage.warning('请选择要审核的申请')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要批量通过选中的 ${selectedApplications.value.length} 个申请吗？`,
      '批量通过',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    submitting.value = true

    const promises = selectedApplications.value.map(app =>
      jobApplicationApi.reviewApplication(app.id, {
        status: 'approved',
        review_comments: '批量审核通过'
      })
    )

    await Promise.all(promises)

    ElMessage.success('批量审核通过成功')
    fetchApplicationList()

  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('批量审核失败:', error)
      ElMessage.error('批量审核失败')
    }
  } finally {
    submitting.value = false
  }
}

const handleBatchReject = async () => {
  if (selectedApplications.value.length === 0) {
    ElMessage.warning('请选择要审核的申请')
    return
  }

  try {
    const { value: reason } = await ElMessageBox.prompt(
      `确定要批量拒绝选中的 ${selectedApplications.value.length} 个申请吗？请输入拒绝理由：`,
      '批量拒绝',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '请输入拒绝理由'
      }
    )

    submitting.value = true

    const promises = selectedApplications.value.map(app =>
      jobApplicationApi.reviewApplication(app.id, {
        status: 'rejected',
        review_comments: reason
      })
    )

    await Promise.all(promises)

    ElMessage.success('批量审核拒绝成功')
    fetchApplicationList()

  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('批量审核失败:', error)
      ElMessage.error('批量审核失败')
    }
  } finally {
    submitting.value = false
  }
}

// 辅助方法
const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return map[status] || status
}

const getStatusTagType = (status: string) => {
  const map: Record<string, string> = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return map[status] || 'info'
}

const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 生命周期
onMounted(() => {
  fetchApplicationList()
  loadJobs()
})
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

/* CSS变量定义 - 支持深色和浅色模式 */
.job-applications-container {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --border-color: #e2e8f0;
  --border-color-light: #f1f5f9;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

  min-height: 100vh;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

/* 深色模式变量 - 使用统一的 #2c2f3b 主色调 */
.dark .job-applications-container {
  --bg-primary: #242732;
  --bg-secondary: #2c2f3b;
  --bg-tertiary: #363a4b;
  --border-color: #4a4e5f;
  --border-color-light: #525670;
  --text-primary: #ffffff;
  --text-secondary: #e5e5e5;
  --text-muted: #b3b3b3;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* 页面头部样式 */
.page-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 24px 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  transition: color 0.3s ease;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 页面内容样式 */
.page-content {
  flex: 1;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 32px 32px;
  transition: all 0.3s ease;
}

/* 搜索区域样式 */
.search-section {
  margin-bottom: 24px;
  animation: slideInDown 0.6s ease-out;
}

.search-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.search-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
}

.search-icon {
  color: #3b82f6;
  font-size: 18px;
}

.search-form {
  padding: 0;
}

.search-input {
  width: 280px;
  transition: all 0.3s ease;
}

.search-input:focus-within {
  transform: scale(1.02);
}

.search-select {
  width: 160px;
  transition: all 0.3s ease;
}

.search-select:focus-within {
  transform: scale(1.02);
}

/* 统计区域样式 */
.statistics-section {
  margin-bottom: 24px;
  animation: slideInUp 0.6s ease-out;
}

.statistics-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.statistics-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.statistics-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
}

.statistics-icon {
  color: #10b981;
  font-size: 18px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transition: all 0.3s ease;
}

.stat-item.total::before {
  background: linear-gradient(90deg, #3b82f6, #6366f1);
}

.stat-item.pending::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.stat-item.approved::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

.stat-item.rejected::before {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表格区域样式 */
.table-section {
  animation: slideInUp 0.6s ease-out;
}

.table-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.table-card:hover {
  box-shadow: var(--shadow-lg);
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--text-primary);
}

.table-header .el-icon {
  color: #6366f1;
  font-size: 18px;
  margin-right: 8px;
}

.table-actions {
  display: flex;
  gap: 8px;
}

.table-container {
  overflow: hidden;
  position: relative;
}

.application-table {
  width: 100%;
  font-size: 14px;
  background: transparent;
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
}

:deep(.el-table__header-wrapper) {
  border-radius: 0;
  background: var(--bg-tertiary);
}

:deep(.el-table th) {
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

:deep(.el-table th.el-table__cell) {
  background: var(--bg-tertiary) !important;
}

:deep(.el-table td) {
  border-bottom: 1px solid var(--border-color-light);
  padding: 12px 8px;
  background: transparent;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

:deep(.el-table__row) {
  background: transparent;
  transition: all 0.3s ease;
}

:deep(.el-table__row:hover) {
  background-color: var(--bg-tertiary) !important;
  transform: scale(1.01);
  box-shadow: var(--shadow-sm);
}

:deep(.el-table__row--striped) {
  background: rgba(var(--border-color-light), 0.3) !important;
}

:deep(.el-table__row--striped:hover) {
  background: var(--bg-tertiary) !important;
}

/* 按钮样式优化 */
:deep(.el-button--small) {
  padding: 8px 16px;
  font-size: 12px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

:deep(.el-button--small:hover) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

:deep(.el-button--primary.is-link) {
  color: #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.2);
}

:deep(.el-button--success.is-link) {
  color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
  border: 1px solid rgba(16, 185, 129, 0.2);
}

:deep(.el-button--danger.is-link) {
  color: #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* 标签样式优化 */
:deep(.el-tag--small) {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  border: none;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

:deep(.el-tag--success) {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

:deep(.el-tag--warning) {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

:deep(.el-tag--danger) {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

/* 分页样式优化 */
.pagination-wrapper {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color-light);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

:deep(.el-pagination) {
  font-weight: 500;
  --el-pagination-bg-color: var(--bg-secondary);
  --el-pagination-text-color: var(--text-primary);
  --el-pagination-border-radius: 8px;
}

:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

:deep(.el-pagination .btn-next:hover),
:deep(.el-pagination .btn-prev:hover) {
  background: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

:deep(.el-pagination .el-pager li) {
  border-radius: 8px;
  margin: 0 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

:deep(.el-pagination .el-pager li:hover) {
  background: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}

:deep(.el-dialog__header) {
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  padding: 20px 24px;
}

:deep(.el-dialog__title) {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 18px;
}

:deep(.el-dialog__body) {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 24px;
}

:deep(.el-dialog__footer) {
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  padding: 16px 24px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-content {
    padding: 20px 24px 24px;
  }

  .header-content {
    padding: 0 24px;
  }

  .page-title {
    font-size: 24px;
  }

  .search-input {
    width: 240px;
  }

  .search-select {
    width: 140px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 16px 20px;
  }

  .page-content {
    padding: 16px 20px 20px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-title {
    font-size: 22px;
  }

  .search-input,
  .search-select {
    width: 100%;
    min-width: 200px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: block;
    margin-bottom: 16px;
    width: 100%;
  }

  :deep(.el-form--inline .el-form-item:last-child) {
    margin-bottom: 0;
  }

  :deep(.el-form-item__content) {
    width: 100%;
  }

  .stat-item {
    margin-bottom: 16px;
  }

  :deep(.el-table) {
    font-size: 13px;
  }

  :deep(.el-table td),
  :deep(.el-table th) {
    padding: 10px 6px;
  }

  :deep(.el-button--small) {
    padding: 6px 12px;
    font-size: 11px;
  }

  .pagination-wrapper {
    padding: 16px 20px;
  }

  :deep(.el-pagination .el-pagination__sizes),
  :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 12px 16px;
  }

  .page-content {
    padding: 12px 16px 16px;
  }

  .page-title {
    font-size: 20px;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .header-actions .el-button {
    width: 100%;
    justify-content: center;
  }

  :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto !important;
  }

  :deep(.el-dialog__body) {
    padding: 16px;
  }
}
</style>